<template>
  <el-container>
    <el-header>
      <div class="left-panel">
        <h3>历史操作记录</h3>
      </div>
      <div class="right-panel">
        <jcx-table-bar :search="false" @queryTable="getList" :columns="columns"></jcx-table-bar>
      </div>
    </el-header>
    <el-main class="nopadding">
      <el-table ref="table" v-loading="loading" :data="loginList" row-key="loginId"
                :stripe="config.stripe" :border="config.border" :size="config.size" style="width: 100%">
        <el-table-column label="登录日志编号" align="center" prop="loginNo"
                         v-if="columns[0].visible"></el-table-column>
        <el-table-column label="用户名" align="center" prop="userName" v-if="columns[1].visible"></el-table-column>
        <el-table-column label="登录IP" align="center" prop="ip" v-if="columns[2].visible"></el-table-column>
        <el-table-column label="登录地点" align="center" prop="location" v-if="columns[3].visible"></el-table-column>
        <el-table-column label="浏览器类型" align="center" prop="browser" v-if="columns[4].visible"></el-table-column>
        <el-table-column label="操作系统" align="center" prop="os" v-if="columns[5].visible"></el-table-column>
        <el-table-column label="提示消息" align="center" prop="msg" v-if="columns[6].visible"></el-table-column>
        <el-table-column label="状态" align="center" prop="status" v-if="columns[7].visible">
          <template #default="scope">
            <el-tag v-if="scope.row.status" type="success">成功</el-tag>
            <el-tag v-if="!scope.row.status" type="danger">失败</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" align="center" prop="createTime"
                         v-if="columns[8].visible"></el-table-column>
        <el-table-column label="备注" align="center" prop="remark" v-if="columns[9].visible"></el-table-column>
      </el-table>
      <jcx-page
          v-show="total>0"
          :total="total"
          v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize"
          @pagination="getList"
      ></jcx-page>
    </el-main>
  </el-container>
</template>

<script>
module.exports = {
  data() {
    return {
      // 遮罩层
      loading: true,
      loginList: [],
      config: {
        // 表格大小
        size: "default",
        // 表格边框
        border: true,
        // 表格斑马图纹
        stripe: true
      },
      columns: [
        {key: 0, label: `登录日志编号`, visible: true},
        {key: 1, label: `用户名`, visible: true},
        {key: 2, label: `登录IP`, visible: true},
        {key: 3, label: `登录地点`, visible: true},
        {key: 4, label: `浏览器类型`, visible: true},
        {key: 5, label: `操作系统`, visible: true},
        {key: 6, label: `提示消息`, visible: true},
        {key: 7, label: `状态`, visible: true},
        {key: 8, label: `创建时间`, visible: false},
        {key: 9, label: `备注`, visible: false},
      ],
      // 分页总条数
      total: 0,
      queryParams: {
        userId: this.$TOOL.data.get("APP_USER_INFO").userId,
        pageNum: 1,
        pageSize: 10
      },
    }
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      this.loading = true;
      this.$API.log.pageListLogin.get(this.queryParams).then(response => {
        if (response.status) {
          this.loginList = response.data.records
          this.total = response.data.total
        } else {
          this.$message.warning(response.msg);
        }
        this.loading = false;
      })
    },
  }
}
</script>

<style>
</style>
